<template>
  <div class="statistical-1 statistical">
    <div class="col blur">
      <BlockItem style="height: 35%" class="block-item" title="人才队伍整体情况" :sub-title="'截止至：'+now" type="1">
        <div class="talent-situation" v-loading="loading.situation" element-loading-background="rgba(0, 0, 0, 0.4)">
          <div class="situation">
            <div class="label">全市现有各类人才</div>
<!--            <div class="count">{{ (numberData[0].number).toFixed(2)}}万余人</div>-->
            <div class="count">14.02万余人</div>
          </div>
          <div class="situation">
            <div class="label">占总人口</div>
<!--            <div class="count">{{ numberData[1].number}}%</div>-->
            <div class="count">13%</div>
          </div>
        </div>
      </BlockItem>
      <BlockItem style="height: 65%" class="block-item age-distribution" title="各区县人才占比" type="1">
        <div v-if="ageData.length>0" class="age-distribution-list">
          <div class="age-item" @click="openAreaTalent(0)">
            <div class="desc">
              <div class="info">
                <div style="background: #1ef0d7" class="color-block"></div>
                <div class="text">肃州区</div>
              </div>
              <div class="percentage">{{ageData[0].value}}万人</div>
            </div>
            <div class="age-chart" id="age-chart1"></div>
          </div>
          <div class="age-item" @click="openAreaTalent(1)">
            <div class="desc">
              <div class="info">
                <div style="background:#3c65f8 " class="color-block"></div>
                <div class="text">玉门市</div>
              </div>
              <div class="percentage">{{ageData[1].value}}万人</div>
            </div>
            <div class="age-chart" id="age-chart2"></div>
          </div>
          <div class="age-item" @click="openAreaTalent(2)">
            <div class="desc">
              <div class="info">
                <div style="background: #45b777" class="color-block"></div>
                <div class="text">敦煌市</div>
              </div>
              <div class="percentage">{{ageData[2].value}}万人</div>
            </div>
            <div class="age-chart" id="age-chart3"></div>
          </div>
          <div class="age-item" @click="openAreaTalent(3)">
            <div class="desc">
              <div class="info">
                <div style="background: #ecc139" class="color-block"></div>
                <div class="text">金塔县</div>
              </div>
              <div class="percentage">{{ageData[3].value}}万人</div>
            </div>
            <div class="age-chart" id="age-chart4"></div>
          </div>
          <div class="age-item" @click="openAreaTalent(4)">
            <div class="desc">
              <div class="info">
                <div style="background: #8357E1" class="color-block"></div>
                <div class="text">瓜州县</div>
              </div>
              <div class="percentage">{{ageData[4].value}}万人</div>
            </div>
            <div class="age-chart" id="age-chart5"></div>
          </div>
          <div class="age-item" @click="openAreaTalent(5)">
            <div class="desc">
              <div class="info">
                <div style="background: #FC6E6E" class="color-block"></div>
                <div class="text">肃北县</div>
              </div>
              <div class="percentage">{{ageData[5].value}}万人</div>
            </div>
            <div class="age-chart" id="age-chart6"></div>
          </div>
          <div class="age-item" @click="openAreaTalent(6)">
            <div class="desc">
              <div class="info">
                <div style="background: #71B346" class="color-block"></div>
                <div class="text">阿克塞县</div>
              </div>
              <div class="percentage">{{ageData[6].value}}万人</div>
            </div>
            <div class="age-chart" id="age-chart7"></div>
          </div>
        </div>
      </BlockItem>
    </div>
    <div class="col full">
      <BlockItem style="height: 65%" class="block-item">
        <div class="number-block">
          <NumberItem v-loading="loading.situation" element-loading-background="rgba(0, 0, 0, 0.4)" class="number-item" v-for="item in numberData" :key="item.id" :name="item.name" :number="item.number" :color="item.color" :unit="item.unit" :icon="item.icon"></NumberItem>
        </div>
        <Map class="global-map"></Map>
      </BlockItem>
      <BlockItem style="height: 35%" class="block-item blur">
        <Table @emitClick="openTalents" title="各县市人才总量及投入" :tableData="tableData"></Table>
      </BlockItem>
    </div>
    <div class="col blur">
      <BlockItem style="height: 55%;cursor: pointer" class="block-item" title="重点人才情况" type="1">
        <div class="key-talents" v-loading="loading.keyTalent" element-loading-background="rgba(0, 0, 0, 0.4)">
          <div class="body" id="task-list-2" >
            <div id="vessel-2" :style="{transform:`translate(0px,-${scrollTop2}px)`}">
              <div class="key-talent-item" @click="openKeyTalents(item.id,item.name)" v-for="(item,index) in keyTalents" :key="index">
                <div class="info">
                  <div class="number" :class="'number-'+(index+1)">{{index+1}}</div>
                  <div class="title">{{item.name}}</div>
                  <div class="count">{{item.count}}</div>
                  <div class="unit">人</div>
                </div>
                <Progress :percentage="item.percentage"></Progress>
              </div>
            </div>
          </div>
        </div>
      </BlockItem>
      <BlockItem style="height: 45%" class="block-item" title="高层次平台建设" type="1">
        <div class="scientific" v-loading="loading.scientific" element-loading-background="rgba(0, 0, 0, 0.4)">
          <div class="head">
            <div class="number"></div>
            <div class="name">高层次平台名称</div>
            <div class="count">数量（个）</div>
          </div>
          <template v-if="scientific.length>0">
            <div class="body" id="task-list-1" >
              <div id="vessel-1" :style="{transform:`translate(0px,-${scrollTop1}px)`}">
                <div @click="openScientific(item.id,item.name)" class="item" v-for="(item,index) in scientific" :key="item.id">
                  <div class="number">{{index+1}}</div>
                  <div class="name">{{ item.name }}</div>
                  <div class="count">{{ item.count||0 }}</div>
                </div>
              </div>
            </div>
          </template>
          <div style="text-align: center;color: #fff" v-else>暂无数据</div>
        </div>
      </BlockItem>
<!--      <BlockItem style="height: 25%" class="block-item" title="职称等级" type="1">-->
<!--        <div class="chart" id="titlesLevelBar"></div>-->
<!--      </BlockItem>-->
<!--      <BlockItem style="height: 35%" class="block-item" title="人才专项经费情况" type="1">-->
<!--        <TableFunding @emitClick="openTalents" :tableData="fundingData"></TableFunding>-->
<!--      </BlockItem>-->
    </div>
    <Dialog v-if="dialog.keyTalents.show" :info="dialog.keyTalents">
      <KeyTalentList :id="dialog.keyTalents.id"></KeyTalentList>
    </Dialog>
    <Dialog v-if="dialog.talents.show" :info="dialog.talents">
      <TalentList :id="dialog.talents.id"></TalentList>
    </Dialog>
    <Dialog v-if="dialog.areaTalent.show" :info="dialog.areaTalent">
      <TalentList :id="dialog.areaTalent.id"></TalentList>
    </Dialog>
    <Dialog v-if="dialog.scientific.show" :info="dialog.scientific">
      <ScientificList :id="dialog.scientific.id"></ScientificList>
    </Dialog>
  </div>
</template>

<script>
import NumberItem from "@/components/NumberItem/NumberItem.vue";
import Table from "@/components/Table/Table.vue";
import {
  areaProportion, fundingList,
  getIndicatorsList, getTitlesLevelBar,
  getTotalCount,
  keyTalents, scientificCategoryCount
} from "@/api/statistical1";
import BlockItem from "@/components/BlockItem/BlockItem.vue";
import {getCurrentTime} from "@/utils/utils";
import Progress from "@/components/Progress/Progress.vue";
import { getArrByKey,} from "@/utils/chart";
import Dialog from "@/components/Dialog.vue";
import Map from "@/components/Map.vue";
import KeyTalentList from "@/components/Dialog/KeyTalentList.vue";
import TalentList from "@/components/Dialog/TalentList.vue";
import ScientificList from '@/components/Dialog/ScientificList.vue'
import TableFunding from "@/components/Table/TableFunding.vue";
export default {
  name: "Statistical1",
  components: {
    TableFunding,
    KeyTalentList,
    Map,
    Dialog,
    Progress,
    BlockItem,
    Table,
    NumberItem,
    TalentList,
    ScientificList,
  },
  data() {
    return {
      now:'',

      loading:{
        situation:false,
        keyTalent:false,
        scientific:false,
      },
      keyTalents:[],
      scientific:[],

      numberData: [
        {
          id: 1,
          unit: '万人',
          color: ['#5c6affb3', '#4a29d8b3'],
          name: '人才总量',
          icon: 'icon-rencaifuwu',
          number: 14.02
        },
        {
          id: 2,
          unit: '万元',
          color: ['#30cbf7b3', '#1997e1b3'],
          name: '人才经费投入总量',
          icon: 'icon-fenlei',
          number: 2064
        },
        {
          id: 3,
          unit: '万元',
          color: ['#12f1b8b3', '#0db5e6b3'],
          name: '市本级人才发展资金',
          icon: 'icon-zijin',
          number: 1928
        },
        {
          id: 4,
          unit: '人',
          color: ['#f7c759b3', '#fb838fb3'],
          name: '2023年人才引进总量',
          icon: 'icon-rencaifuwu',
          number: 187
        },
      ],
      tableData: {
        head: [
          {field:'id',name: '序号', width: 20},
          {field:'area_name',name: '县市', width: 14},
          {field:'total',name: '人才总量', width: 22},
          {field:'talent_proportion',name: '各类人才占人口比例', width: 22},
          {field:'money',name: '人才发展专项资金', width: 22},
        ],
        data: [
        ]
      },
      chart:{
        ageSingle1:null,
        ageSingle2:null,
        ageSingle3:null,
        ageSingle4:null,
        ageSingle5:null,
        ageSingle6:null,
        ageSingle7:null,
      },
      ageData:[],

      fundingData:{
        head: [
          {field:'name',name: '县市', width: 20},
          {field:`${new Date().getFullYear()-1}`,name: `${new Date().getFullYear()-1}`, width: 20},
          {field:`${new Date().getFullYear()}`,name: `${new Date().getFullYear()}`, width: 20},
          {field:'increase',name: '同比增加', width: 20},
          {field:'increase_percentage',name: '同比增长', width: 20},
        ],
        data: [
        ]
      },

      dialog:{
        keyTalents:{
          title:'',
          show:false,
          id:null,
          width:'1200px'
        },
        scientific:{
          title:'',
          show:false,
          id:null,
          width:'600px'
        },
        talents:{
          title:'',
          show:false,
          id:null,
          width:'1200px'
        },
        areaTalent:{
          title:'',
          show:false,
          id:null,
          width:'1200px'
        }
      },

      taskTimer1:null,
      scrollTop1:0,
      taskTimer2:null,
      scrollTop2:0,
    }
  },
  beforeDestroy() {
    clearInterval(this.taskTimer1);
    clearInterval(this.taskTimer2);
  },
  methods: {
    getTask1(){
      this.scrollTop1=0;
      clearInterval(this.taskTimer1);
      this.$nextTick(()=>{
        let vesselHeight=document.getElementById('vessel-1').offsetHeight;
        let height=document.getElementById('task-list-1').offsetHeight;
        if(vesselHeight>height){
          this.taskTimer1=setInterval(()=>{
            if(height+this.scrollTop1<vesselHeight){
              this.scrollTop1++;
            }else{
              clearInterval(this.taskTimer1);
              this.getTask1()
            }
          },100)
        }
      })
    },
    getTask2(){
      this.scrollTop2=0;
      clearInterval(this.taskTimer2);
      this.$nextTick(()=>{
        let vesselHeight=document.getElementById('vessel-2').offsetHeight;
        let height=document.getElementById('task-list-2').offsetHeight;
        if(vesselHeight>height){
          this.taskTimer2=setInterval(()=>{
            if(height+this.scrollTop2<vesselHeight){
              this.scrollTop2++;
            }else{
              clearInterval(this.taskTimer2);
              this.getTask2()
            }
          },100)
        }
      })
    },
    openKeyTalents(id,title){
      this.dialog.keyTalents.show=true;
      this.dialog.keyTalents.id=id;
      this.dialog.keyTalents.title=title;
    },
    openTalents(item){
      this.dialog.talents.show=true;
      this.dialog.talents.id=item.area;
      this.dialog.talents.title=item.area_name;
    },
    openScientific(id,title){
      this.dialog.scientific.show=true;
      this.dialog.scientific.id=id;
      this.dialog.scientific.title=title;
    },
    openAreaTalent(index){
      const data=this.ageData[index];
      this.dialog.areaTalent.show=true;
      this.dialog.areaTalent.id=data.id;
      this.dialog.areaTalent.title=data.name;
    },
    totalCount(){
      this.loading.situation=true
      getTotalCount().then(data=>{
        /*this.numberData[0].number=data.total.value
        this.numberData[1].number=data.funding.value
        this.numberData[2].number=data.money.value
        this.numberData[3].number=data.introduction.value*/
      }).finally(()=>{
        this.loading.situation=false
      })
    },
    getIndicators(){
      getIndicatorsList().then(data=>{
        this.tableData.data=data;
      })
    },
    getKeyTalents(){
      this.loading.keyTalent=true
      keyTalents().then(res=>{
        /*this.keyTalents=res;
        console.log(res)*/
        this.keyTalents=[
          {id:1,name:'酒泉市入选国家全国杰出专业技术人才、改革先锋',percentage:2,count:1},
          {id:2,name:'酒泉市入选国家“百千万人才工程”人才',percentage:2,count:1},
          {id:3,name:'酒泉市入选国家“万人计划”科技创业领军人才',percentage:4,count:2},
          {id:4,name:'酒泉市国务院特殊津贴专家人才',percentage:33,count:16},
          {id:5,name:'酒泉市入选甘肃省领军人才',percentage:18,count:9},
          {id:6,name:'酒泉市入选甘肃省优秀专家人选',percentage:31,count:15},
          {id:7,name:'酒泉市入选甘肃省陇原青年英才',percentage:8,count:4},
        ];
        this.getTask2();
      }).finally(()=>{
        this.loading.keyTalent=false
      })
    },
    getScientific(){
      this.loading.scientific=true
      scientificCategoryCount().then(res=>{
        this.scientific=res
        this.getTask1();
      }).finally(()=>{
        this.loading.scientific=false
      })
    },
    initAgeSingle(){
      const color=['#1ef0d7','#3c65f8','#45b777','#ecc139','#8357E1','#FC6E6E','#71B346'];
      const bgColor=['rgba(30,240,215,0.5)','rgba(60,101,248,0.5)','rgba(69,183,119,0.5)','rgba(236,193,57,0.5)','rgba(131,87,225,0.5)','rgba(252,110,110,0.5)','rgba(113,179,70,0.5)'];
      areaProportion().then(data=>{
        console.log(data);
        this.ageData=data;
        const format={
          14:{
            value:4.5891,
            percentage:41.22,
          },
          15:{
            value:1.9295,
            percentage:17.33,
          },
          16:{
            value:0.8237,
            percentage:7.39,
          },
          17:{
            value:1.518,
            percentage:13.63,
          },
          18:{
            value:1.6642,
            percentage:14.94,
          },
          19:{
            value:0.365,
            percentage:3.27,
          },
          20:{
            value:0.2424,
            percentage:2.22,
          },
        };
        this.$nextTick(()=>{
          data.forEach((item,index)=>{
            item.value=format[item.id].value;
            item.percentage=format[item.id].percentage;
            const chart=this.$echarts.init(document.getElementById('age-chart'+(index+1)));
            this.chart['ageSingle'+(index+1)] = chart;
            let option={
              series: [
                {
                  type: 'gauge',
                  startAngle: 270,
                  endAngle: -90,
                  radius:'75%',
                  pointer: {
                    show: false
                  },
                  progress: {
                    show: true,
                    roundCap:true,
                    width:5,
                    itemStyle:{
                      color:color[index],
                    },
                  },
                  data: [{
                    value: item.percentage,
                    name: item.name,
                    title: {
                      offsetCenter: ['0%', '-30%']
                    },
                    detail: {
                      valueAnimation: true,
                      offsetCenter: ['0%', '0%']
                    }
                  }],
                  axisLine:{
                    show:true,
                    lineStyle:{
                      width:5,
                      color:[
                        [0,bgColor[index]],
                        [1,bgColor[index]],
                      ]
                    }
                  },
                  splitLine:{
                    show:false,
                  },
                  axisTick:{
                    show:false
                  },
                  axisLabel:{
                    show:false,
                  },
                  title:{
                    show:false,
                  },
                  detail:{
                    show:true,
                    color:'#fff',
                    fontSize:12,
                  },
                }
              ]
            };
            chart.setOption(option);
          })
        })
      })
    },
    async initTitlesLevelBar() {
      this.chart.titlesLevelBar = this.$echarts.init(document.getElementById('titlesLevelBar'));
      this.chart.titlesLevelBar.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data = await getTitlesLevelBar();
      let maxValue = Math.max.apply(null, getArrByKey(data));
      let bgArr = data.map(() => {
        return maxValue + maxValue * 0.2
      });
      let stackValue = (maxValue + maxValue * 0.2) * 0.01;
      let option = {
        tooltip: {
          trigger: 'item',
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        yAxis: {
          type: 'category',
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff', fontSize: 14}},
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: getArrByKey(data, 'name'),
        },
        series: [
          {
            type: 'bar',
            barGap: '-119%',
            stack: 'assist',
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
              },
            },
            emphasis: {
              disabled: true
            },
            data: bgArr.map(() => stackValue)
          }, {
            name: '人数',
            data: data,
            type: 'bar',
            stack: 'assist',
            barWidth: 16,
            z: 12,
            itemStyle: {
              normal: {
                barBorderRadius: [15, 15, 15, 15],
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#f9f77c'
                }, {
                  offset: 1,
                  color: '#2de4a2'
                }])
              }
            },
          }, {
            type: 'bar',
            barWidth: 22,
            barGap: '-119%',
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderRadius: [15, 15, 15, 15],
                borderColor: '#3be6b2',
                color: 'rgba(0,0,0,0)',
              },
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
        ]
      }
      this.chart.titlesLevelBar.hideLoading();
      this.chart.titlesLevelBar.setOption(option)
    },
    getFundingList(){
      fundingList().then(res=>{
        this.fundingData.data=res;
      })
    }
  },
  mounted() {
    this.now=getCurrentTime('i');
    //顶部统计&人才队伍整体情况
    this.totalCount();
    //各县市人才总量及投入
    this.getIndicators();
    //重点人才情况
    this.getKeyTalents();
    //高层次平台建设
    this.getScientific()
    //年龄分布
    this.initAgeSingle()
    this.getFundingList()
    //职称等级
    //this.initTitlesLevelBar();
  }
}
</script>
<style lang="scss">
.statistical-1{
  .talent-situation{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .situation{
      margin: 0 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .label{
        margin-bottom: 10px;
        color: #fff;
        font-size: 20px;
      }
      .count{
        color: #19fddf;
        font-size: 28px;
      }
    }
  }
  .key-talents{
    width: 100%;
    height: 100%;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .body{
      height: 100%;
      overflow-y: auto;
    }
    .body::-webkit-scrollbar {
      width: 0;
      background-color: #F5F5F5
    }
    .key-talent-item{
      width: 100%;
      height: 60px;
      padding: 5px 12px;
      border: 1px solid #3a4855;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 10px;
      .info{
        width: 100%;
        display: flex;
        align-items: center;
        .number{
          width: 30px;
          height: 18px;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 10px;
          font-size: 14px;
          border: 1px solid #479e9d;
          box-shadow: inset 0 0 20px 0 rgba(71, 158, 157, 0.5);
        }
        .number-1{
          border: 1px solid #83690f;
          box-shadow: inset 0 0 20px 0 rgba(131, 105, 15 , 50%);
        }
        .number-2{
          border: 1px solid #7e3f21;
          box-shadow: inset 0 0 20px 0 rgba(126, 63, 33, 0.50);
        }
        .title{
          color: #fff;
          font-size: 14px;
          width: calc(100% - 100px);
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .count{
          color: #fff;
          width: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          font-weight: bold;
          font-style: italic;
        }
        .unit{
          color: #98b8d3;
          font-size: 14px;
        }
      }
    }
  }
  .scientific{
    width: 100%;
    height: 100%;
    padding: 20px;
    .body{
      height: calc(100% - 30px);
      overflow-y: auto;
    }
    .body::-webkit-scrollbar {
      width: 0;
      background-color: #F5F5F5
    }
    .head{
      width:calc(100% - 10px);
      margin-left: 10px;
      height: 30px;
      display: flex;
      align-items: center;
      background: url("~@/assets/images/table-head.png") no-repeat center;
      background-size: 100% 30px;
      >div{
        font-size: 12px;
        color: #1499fe;
      }
    }
    .number{
      width: 50px;
    }
    .name{
      width: calc(100% - 130px);
    }
    .count{
      font-size: 12px;
      text-align: center;
      width: 80px;
    }
    .item{
      cursor: pointer;
      height: 42px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #3b3b3b;
      .number{
        margin: 0 8px;
        width: 25px;
        height: 17px;
        font-size: 12px;
        color: #f57533;
        border: 1px solid #f57533;
        box-shadow: inset 0 0 20px 0 rgba(245, 117, 51, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-style:italic;
      }
      >div{
        font-size: 12px;
      }
      .name{
        width: calc(100% - 146px);
        color: #fff;
        margin-left: 20px;
      }
      .count{
        color: #40c777;
      }
    }
  }
  .age-distribution{
    position: relative;
    .age-total{
      position: absolute;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      transform: translate(-50%,0);
      left: 50%;
      top: 90px;
    }
    .age-distribution-list{
      width:100%;
      padding: 0 20px;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .age-item{
        cursor: pointer;
        width: calc(50% - 5px);
        height: 25%;
        display: flex;
        align-items: center;
        .desc{
          width: 60%;
          display: flex;
          flex-direction: column;
          .info{
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            .color-block{
              width: 10px;
              height: 10px;
              border-radius: 2px;
              margin-right: 10px;
            }
            .text{
              font-size: 14px;
              color: #fff;
            }
          }
          .percentage{
            font-size: 14px;
            margin-left: 20px;
            color: #ccc;
          }
        }
        .age-chart{
          width: 40%;
          height: 100%;
        }
      }
    }
  }
}
</style>
